<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>data:数据对象</title>
  </head>

  <body>
    <div id="app">
      {{ message }}
      <!-- //school对象。 school.name是对象的属性name -->
      <h2>{{ school.name }} {{ school.mobile }}</h2>

      <ul>
        <!-- campus对象。 campus[0]就获取了值，=，-->
        <li>{{ campus[0] }}</li>
        <li>{{ campus[3] }}</li>
      </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "你好 小黑!",
          school: {
            //school对象。
            name: "黑马程序员", //对象的属性
            mobile: "400-618-9090",
          },
          campus: ["北京", "上海", "广州", "深圳"], //数组
        },
      });
    </script>

    <!-- data是这个Vue实例中使用到的数据。用什么就写什么 -->
  </body>
</html>
